<template>
    <el-card class="box-card">
        <el-button type="primary" text @click="dialogFormVisible = true">+新增</el-button>
        <el-dialog v-model="dialogFormVisible" title="新增鱼缸" width="25%" v-if="status == '1' || status == '2'">
            <el-form :model="addFishModel">
                <el-form-item label="名称" :label-width="70">
                    <el-input v-model="addFishModel.name" placeholder="请输入鱼的名称" class="ipt" />
                </el-form-item>
                <el-form-item label="类型" :label-width="70">
                    <el-input v-model="addFishModel.type" placeholder="请输入鱼的类型" class="ipt" />
                </el-form-item>
                <el-form-item label="状态" :label-width="70">
                    <el-select v-model="addFishModel.state" class="ipt" placeholder="请选择鱼的状态">
                        <el-option label="良好" value="良好" />
                        <el-option label="生病" value="生病" />
                        <el-option label="死亡" value="死亡" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="70">
                    <el-select v-model="addFishModel.inAge" class="ipt" placeholder="请选择鱼的年龄">
                        <el-option v-for="count in 12" :label="count + '月'" :value="count" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上传图片" :label-width="70">
                    <el-input type="file" accept="image/*" v-model="addFishModel.pic" :onchange="addFishPic"
                        placeholder="请输入鱼缸编号" class="ipt" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addFish">提交</el-button>
                </span>
            </template>
        </el-dialog>
        <el-table :data="fishMessages" style="width: 100%">
            <el-table-column prop="id" label="编号" width="350"/>
            <el-table-column prop="type" label="类型" width="350"/>
            <el-table-column prop="name" label="名称" width="300"/>
            <el-table-column prop="inAge" label="年龄" width="300"/>
            <el-table-column prop="state" label="状态"/>
        </el-table>
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ApiAddFishPic, ApiAddFish, ApiGetAllFish } from '@/apis/informations'
interface fishModel{
    id:string;
    type:string;
    inAge:string;
    name:string;
    state:string;
}
let dialogFormVisible = ref(false)
let status: Ref<string | null> = ref(sessionStorage.getItem('status'))
let id = sessionStorage.getItem('aquarium')
let addFishModel = reactive({ fishImg: '', inAge: '', name: '', pid: id, state: '', type: '', pic: '' })
let fishMessages = reactive<Array<fishModel>>([])
let getAllFish = async () => {
    let res = await ApiGetAllFish()
    let list:Array<fishModel> = res.data.data.fishList
    fishMessages.push(...list)
    console.log(fishMessages)
}
getAllFish()

let addFishPic = async (e: Event) => {
    if (e.target != null) {
        const target = e.target as HTMLInputElement;
        const file: File = (target.files as FileList)[0];
        let formData = new FormData();
        formData.append('pic', file, file.name);
        let address = await ApiAddFishPic(formData);
        addFishModel.fishImg = address.data.data.picUrl;
        console.log(formData.getAll('pic'))
    }
}

let addFish = async () => {
    let data = await ApiAddFish(addFishModel)
    if (data.data.message) {
        ElMessage.success('添加成功')
        dialogFormVisible.value = false
    } else {
        ElMessage.error('添加失败,输入id的鱼缸不存在')
    }
}


</script>
<style scoped lang="scss">
.box-card {
    margin-top: 20px;
}

.ipt {
    width: 90%;
    display: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>